import React, { useState, useEffect, useRef ,useMemo} from 'react'
import { IGoods } from '../../interface'
import getHome from '../api/home'
import { TruckOutline,StarFill } from 'antd-mobile-icons'
import { NavLink } from 'react-router-dom'
import { store } from '../../store'
import { useDispatch ,useSelector} from 'react-redux'
import './find.scss'
import { SET_TAB, CLEAR_TAB, SET_SCROLLY, CLEAR_SCROLLY } from '../../store/actionType'
import { Button, Toast, Tabs, Swiper } from 'antd-mobile'
import API from '../api/shopCar'
import { useLocation } from 'react-router-dom'

const tabs = [
  {
    title: '蛋糕',
    key: '1'
  },
  {
    title: '面包',
    key: '2'
  },
  {
    title: '下午茶',
    key: '3'
  },
  {
    title: '冰淇淋',
    key: '4'
  },
  {
    title: '设计师礼品',
    key: '5'
  },
]

export default function Find() {
  const dispatch = useDispatch()
  const location = useLocation()
  const { token, _id } = store.getState().userReducer.user
  const {tabReducer} = useSelector((state:any)=>state)
  const [activeIndex, setActiveIndex] = useState(tabReducer.tab)
  console.log(tabReducer.tab,'6666')
  const [goods_list, set_list] = useState([])
  const isLogin = useMemo(() => token, [token])
  const getGoods = async () => {
    let res = await getHome["getHome"]()
    set_list(res.data.data)
  }

  useEffect(() => {
    getGoods()
  }, [])
  // useEffect(() => {
  //   getGoods()
  //   // console.log(store.getState().tabReducer.tab, '6666')
  // }, [store.getState().tabReducer.tab])

  const shopCarAdd = async(item:IGoods) =>{
    let res = await API['shopCarAdd']({...item,token,user_id:_id})
    console.log(res,'加入购物车')
    Toast.show({
        content: '已加入购物车',
        position: 'top'
      })
}
  return (
    <div>
      {/* <ul>
        {
          tabs.map((item, i) => <li
            key={i}
            onClick={() => {
              setTab(item)
              dispatch({ type: SET_TAB, payload: item })
              // console.log(window.scrollY);
              // dispatch({ type: CLEAR_SCROLLY, payload: 0 })

              console.log(store.getState().tabReducer.tab, '6666')
            }}>{item}</li>)
        }
      </ul> */}
      <div className='find_nav'>
        <Tabs
          activeKey={tabs[activeIndex].key}
          onChange={key => {
            const index = tabs.findIndex(item => item.key === key)
            dispatch({type:SET_TAB, payload:index})
            setActiveIndex(index)
            console.log(index)
          }}
        >
          {tabs.map(item => (
            <Tabs.Tab title={item.title} key={item.key} />
          ))}
        </Tabs>
      </div>
      <div className='find_main'>
        <div className='noGoods'>

          <div className='details'>
            {
              goods_list.filter((item: IGoods) => item.category == tabs[activeIndex].title).map((ele: IGoods) => (
                <div
                  key={ele._id}
                  id={ele._id}><NavLink to={'/topic/' + ele._id}>
                    {
                      ele.tabs=='新品'? <><span>新品</span><b></b></>:(ele.tabs=='人气'?<><span>人气</span><b></b></>:(ele.tabs=='明星'?<><span className='star'><StarFill />明星</span><b className='starB'></b></>:<><span>时令</span><b></b></>))
                    }
                    <img src={ele.img} alt="" />
                    <h4>{ele.goods_name}</h4>
                    <p>{`${ele.price} / ${ele.weight} 磅`}</p></NavLink>
                    <div className='button' onClick={()=>shopCarAdd(ele)}>
                        <i><TruckOutline /></i>
                    </div>
                </div>
              ))
            }
          </div>
        </div>
        {/* {
        goods_list.filter((item: IGoods) => item.category == store.getState().tabReducer.tab).map((ele: IGoods) => <NavLink
          onClick={() => {
          }}
          key={ele._id}
          to={'/topic/' + ele._id}>
          <div

            id={ele._id}>
            <img src={ele.img} alt="" />
            <div>
              <div className='left'>
                <p>{ele.goods_name}</p>
                <b>{`${ele.price} / ${ele.weight} 磅`}</b>
              </div>
              <div className='right'>
                <button >
                  <TruckOutline />
                </button>
              </div>
            </div>
          </div>
        </NavLink>)
      } */}
      </div>
    </div>
  )
}
